<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>系统管理</el-breadcrumb-item>
			<el-breadcrumb-item>角色列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片式图 -->
		<el-card class="box-card">
			<!-- 搜索添加区 -->

			<el-row :gutter="20">
				<el-col :span="8" label="角色名">
					<!-- @clear 绑定getuserlist 点击文本清除时重新搜索数据 -->

					<el-input @clear="getrolelist" clearable placeholder="请输入角色名称" v-model="formInline.rname" class="input-with-select"></el-input>
				</el-col>
				<el-col :span="8"><el-button type="success" @click="getrolelist">搜索</el-button></el-col>
				<el-col :span="4"><el-button type="primary" @click="addDialogVisible = true">添加角色</el-button></el-col>
			</el-row>

			<!-- 用户列表区 -->
			<el-table :data="rolelist" border stripe style="width: 100%">
				<el-table-column prop="rid" label="编号" width="70"></el-table-column>
				<el-table-column prop="rname" label="角色名" width="400"></el-table-column>
				<el-table-column label="操作" width="300">
					<template slot-scope="scope">
						<el-button type="success" size="mini" v-on:click="setRole(scope.row.rid)">权限</el-button>
						<el-button type="warning" size="mini" v-on:click="showEditDialog(scope.row)">修改</el-button>
						<el-button type="warning" size="mini" v-on:click="removeroleById(scope.row.rid)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页区 -->
			<el-pagination
				v-on:size-change="handleSizeChange"
				v-on:current-change="handleCurrentChange"
				:current-page="page"
				:page-sizes="[5, 10, 15]"
				:page-size="100"
				layout="total, sizes, prev, pager, next, jumper"
				:total="count"
			></el-pagination>
		</el-card>
		<!-- 添加用户的对话框 -->
		<el-dialog title="添加用户:" v-on:close="addDialogclosed" :visible.sync="addDialogVisible" width="50%">
			<!-- 内容主体区域 -->
			<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
				<el-form-item label="角色名称" prop="rname"><el-input v-model="addForm.rname"></el-input></el-form-item>
			</el-form>

			<!-- 底部区域 -->
			<span slot="footer" class="dialog-footer">
				<el-button v-on:click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" v-on:click="addrole()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 修改用户的对话框 -->
		<el-dialog title="修改用户" @close="editDialogclosed" :visible.sync="editDialogVisible" width="50%">
			<el-form :model="editForm" :rules="editFormrules" ref="editFormRef" label-width="70px">
				<el-form-item label="角色名" prop="rname"><el-input v-model="editForm.rname"></el-input></el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="edituserinfo">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 分配角色的对话框 -->
		<el-dialog title="分配角色模块" :visible.sync="setRoledialogVisible" width="50%" @close="setRoleDialogClosed">
			<el-tree
				:props="defaultProps"
				:data="modulelist"
				:default-checked-keys="selectedRoleId"
				node-key="Id"
				ref="rootTree"
				show-checkbox
			></el-tree>
			<span slot="footer" class="dialog-footer">
				<el-button @click="setRoledialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveRoleInfo">保存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		// 验证邮箱的规则
		var checkEmail = (rule, value, cb) => {
			//验证邮箱的正则表达式
			const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;

			if (regEmail.test(value)) {
				//合法的邮箱
				return cb();
			}
			cb(new Error('请输入合法的邮箱'));
		};

		//验证手机号的规则
		var checkMobile = (rule, value, cb) => {
			//验证手机号的正则
			const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
			if (regMobile.test(value)) {
				return cb();
			}
			cb(new Error('请输入合法的手机号'));
		};
		return {
			yuankeys:'',
			lastkeys:'',
			defaultProps: {
				children: 'children',
				label: 'Name'
			},
			//获取用户列表参数对象
			formInline: {
				rname: ''
			},
			page: 1,
			limit: 5,
			count: 0,
			//添加用户的表单数据
			addForm: {
				rname: ''
			},
			//添加用户表单验证的验证规则对象
			addFormRules: {
				rname: [
					{
						required: true,
						message: '请输入角色名',
						trigger: 'blur'
					},
					{
						min: 3,
						max: 10,
						message: '角色名的长度在3~10之间',
						trigger: 'blur'
					}
				]
			},
			//编辑用户表单验证对象
			editFormrules: {
				rname: [
					{
						required: true,
						message: '请输入角色名',
						trigger: 'blur'
					}
				]
			},
			// 存放用户列表数据
			rolelist: [],
			//数据总条数
			total: 0,
			//控制添加用户对话框的显示和隐藏
			addDialogVisible: false,
			//控制修改对话框的显示和隐藏
			editDialogVisible: false,
			//用户查询到的用户信息对象
			editForm: {},
			//控制分配角色对话框的显示与隐藏
			setRoledialogVisible: false,
			//需要被分配角色的用户信息
			userinfo: {},
			//角色列表
			roleslist: [],
			modulelist: [],
			//存放选中下拉列表中的值
			selectedRoleId: [],
			//数据库选中的idlist
			keystr:"",
			rid:""
		
		};
	},
	created() {
		this.getrolelist();
	},
	methods: {
		//保存编辑模块
	async	saveRoleInfo(){
			this.getKeys()
			
			const { data: res } = await this.$http.post('api/role/editrolemoudule',{
				str:this.keystr,
				userid:parseInt(this.rid)
			});
			if(res.code!==0)return this.$message.error(res.msg);
			this.$message.success(res.msg)
			this.getallmoudule()
			window.location.reload('/Home')
			this.keystr=""
		},
		//获取选中的节点
		getKeys() {
			var aKey = this.getCheckedKeys(this.rolelist, this.$refs.rootTree.getCheckedKeys(), 'Id');
			for(var i=0;i<aKey.length;i++){
				this.keystr=this.keystr+aKey[i]+","
			}
			this.keystr=this.keystr.substring(0,this.keystr.length-1);
			console.log(this.keystr)
		},
		getCheckedKeys(data, keys, key) {
			return keys
		},
		async getrolelist() {
			const { data: res } = await this.$http.get('api/role/getroletable', {
				params: {
					page: this.page,
					limit: this.limit,
					rname: this.formInline.rname
				}
			});

			this.rolelist = res.data;
			this.count = res.count;
		},
		//监听pagesize改变的事件
		handleSizeChange(newSize) {
			this.limit = newSize;
			this.getrolelist();
		},
		//监听页面值改变的事件
		handleCurrentChange(newPage) {
			this.page = newPage;
			this.getrolelist();
		},

		//监听添加用户对话框的关闭事件清除input内容
		addDialogclosed() {
			this.$refs.addFormRef.resetFields();
		},
		//点击按钮添加新用户
		addrole() {
			this.$refs.addFormRef.validate(async valid => {
				if (!valid) return;
				//可以发起用户请求
				const { data: res } = await this.$http.post('api/role/addrole', this.addForm);
				if (res.code != 0) {
					this.$message.success(res.msg);
				}
				this.$message.success(res.msg);

				//隐藏添加用户的对话框
				this.addDialogVisible = false;

				//重新获取用户列表数据
				this.getrolelist();
			});
		},
		//展示编辑用户对话框
		showEditDialog(row) {
			this.editForm = row;
			this.editDialogVisible = true;
		},
		//监听用户修改对话框的关闭事件重置input框
		editDialogclosed() {
			this.$refs.editFormRef.resetFields();
		},
		//修改用户信息并提交
		edituserinfo() {
			this.$refs.editFormRef.validate(async valid => {
				if (!valid) return;
				const { data: res } = await this.$http.post('api/role/editrole', this.editForm);
				if (res.code != 0) {
					return this.$message.error('查询角色数据失败');
				}
				//提示成功
				this.$message.success('更新成功');
				//关闭对话框
				this.editDialogVisible = false;
				//刷新列表
				this.getrolelist();
			});
		},
		//移除用户事件
		async removeroleById(rid) {
			const confirmResult = await this.$confirm('此操作将永久删除角色和用户角色, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				//如果用户取消删除则 则打印cancel字符串
				.catch(err => err);
			//如果用户确认删除则confirmResult 为confim字符串

			if (confirmResult != 'confirm') {
				return this.$message.info('已经取消删除');
			}
			const { data: res } = await this.$http.post('api/role/del', {
				rid: rid
			});
			if (res.code != 0) {
				this.$message.error('删除失败' + res.msg);
			}
			this.$message.success('删除成功');
			this.getrolelist();
		},
		//获取所有该用户角色模块和所有角色模块
		async getallmoudule(rid) {
			//展示对话框之前获取所有用户角色列表
			const { data: res } = await this.$http.get('api/role/getroletree', {
				params: {
					rid: rid
				}
			});
			this.modulelist = res.data;
			this.selectedRoleId = res.data2;
		},
		//展示用户分配角色模块对话框
		async setRole(rid) {
			this.rid=rid
			this.getallmoudule(rid);
			this.setRoledialogVisible = true;
		
		},
		
	}
};
</script>

<style lang="less" scoped></style>
